<template>
	<div class="index">
		<el-row :gutter="30">
			<el-col class="index-head" :span="24">
				<el-col :lg="18" :xl="20">
					<div class="index-head-left">学员退费</div>
					<div class="quick-entrance">
						<ul>
							<li class="quick-entrance-item">快捷入口：</li>
							<li class="quick-entrance-item">
								<router-link to="/expenditure">加油气</router-link>
							</li>
							<li class="quick-entrance-item">
								<router-link to="/weihuweixiu">维修</router-link>
							</li>
							<li class="quick-entrance-item">
								<router-link to="/gongzifafang">工资</router-link>
							</li>
							<li class="quick-entrance-item">
								<router-link to="/feiyongbaoxiao">报销</router-link>
							</li>
							<li class="quick-entrance-item">
								<router-link to="/cheliangjieche">检车</router-link>
							</li>
							<li class="quick-entrance-item">
								<router-link to="/cheliangbaoxian">保险</router-link>
							</li>
						</ul>
					</div>
				</el-col>
			</el-col>
		</el-row>
		<el-row :gutter="30">
			<el-col :lg="18" :xl="20" class="my-artcle">
				<div class="student-select">
					<p class="student-select-title">学员查询</p>
					<el-input placeholder="输入学员证件号码" v-model="search" class="input-with-select">
						<el-button slot="append" icon="el-icon-search" @click="searchStu">查询</el-button>
					</el-input>
				</div>
				<div class="pay-method">
					<el-col :span="12">
						<el-form labelPosition="right" label-width="120px" ref="form" :model="form" :rules="rules" class="quane-pay">
							<el-form-item label="退费科目：">
								<el-radio-group v-model="form.subject">
									<el-radio label="2">科目二</el-radio>
									<el-radio label="3">科目三</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="学时类型：">
								<el-radio-group v-model="form.lessionType">
									<el-radio label="1">普通学时</el-radio>
									<el-radio label="2">模拟学时</el-radio>
									<el-radio label="4">加时学时</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="退费小时数：" prop="lessionTime">
								<el-input-number class="pay-method-ipt" :min="1" v-model="form.lessionTime"></el-input-number>
							</el-form-item>
							<el-form-item label="退费金额：" prop="amount">
								<el-input class="pay-method-ipt total padding-right" v-model="form.amount" :maxlength="5"></el-input>
							</el-form-item>
							<el-form-item label="经办人：" prop="operator">
								<people-input class="pay-method-ipt" v-model="form.operator" placeholder="请选择经办人"></people-input>
							</el-form-item>
							<el-form-item label="备注：" prop="remark">
								<el-input type="textarea" class="pay-method-ipt" v-model="form.remark"></el-input>
							</el-form-item>
							<el-form-item>
								<input type="button" class="submit-btn" @click="submitForm" value="提   交">
							</el-form-item>
						</el-form>
					</el-col>
					<el-col class="progress-content" :span="12">
						<el-card class="box-card">
							<span v-if="!lessonsInfo.km2 && !lessonsInfo.km3">暂无信息</span>
							<el-col class="progress-item" :span="24" v-if="lessonsInfo.km2">
								<p class="progress-title">科目二</p>
								<div class="progress-cont" v-for="item in lessonsInfo.km2">
									<span class="progress-left">{{['','普通学时','模拟学时','','加时学时'][item.type]}}（{{item.total}}小时）</span>
									<span class="progress-right">已学 {{item.usedH}} 小时 {{item.usedM > 0? item.usedM+'分钟':''}}，剩余 {{item.remainderH}} 小时 {{item.remainderM > 0? item.remainderM+'分钟':''}}</span>
									<el-progress :text-inside="true" :stroke-width="18" :percentage="item.per" status="exception"></el-progress>
								</div>
							</el-col>
							<el-col class="progress-item" :span="24" v-if="lessonsInfo.km3">
								<p class="progress-title">科目三</p>
								<div class="progress-cont" v-for="item in lessonsInfo.km3">
									<span class="progress-left">{{['','普通学时','模拟学时','','加时学时'][item.type]}}（{{item.total}}小时）</span>
									<span class="progress-right">已学 {{item.usedH}} 小时 {{item.usedM > 0? item.usedM+'分钟':''}}，剩余 {{item.remainderH}} 小时 {{item.remainderM > 0? item.remainderM+'分钟':''}}</span>
									<el-progress :text-inside="true" :stroke-width="18" :percentage="item.per" status="exception"></el-progress>
								</div>
							</el-col>
						</el-card>
					</el-col>
				</div>
			</el-col>
			<el-col :lg="6" :xl="4">
				<student-info :stuData="stuData"></student-info>
			</el-col>
		</el-row>
		<!-- 信息确认 -->
		<confirm v-model="confirmShow" title="退费信息确认" @onSubmit="onSubmit">
			<submit-item label="姓名" :value="stuData.name"></submit-item>
			<submit-item label="退费科目" :value="['','','科目二','科目三'][form.subject]"></submit-item>
			<submit-item label="证件号码" :value="stuData.cardnum"></submit-item>
			<submit-item label="学时类型" :value="['','普通学时','模拟学时','','加时学时'][form.lessionType]"></submit-item>
			<submit-item label="经办人" :value="form.operator"></submit-item>
			<submit-item label="退费小时数" :value="form.lessionTime"></submit-item>
			<submit-item label="备注" :value="form.remark"></submit-item>
			<submit-item label="退费金额" :value="form.amount"></submit-item>
		</confirm>
	</div>
</template>

<script>
	import peopleInput from "@/components/people-input";
	import studentInfo from "@/components/student-info";
	import confirm from "@/components/income-submit";
	import submitItem from "@/components/submit-item";

	export default {
		name: "simulationfee",
		components: {
			peopleInput,
			studentInfo,
			confirm,
			submitItem
		},
		data() {
			return {
				search: '',
				stuData: {},
				lessonsInfo: {},
				form: {
					subject: '2',
					lessionType: '1',
					lessionTime: '',
					amount: '',
					operator: '',
					remark: '',
				},
				rules: {
					amount: [{
						required: true,
						message: "请输入退费金额",
						trigger: "blur"
					}],
					operator: [{
						required: true,
						message: "请输入选择经办人",
						trigger: "blur"
					}],
				},
				confirmShow: false, //信息确认
			};
		},
		methods: {
			searchStu() {
				if(this.search != "") {
					this.$http.get(process.env.JXH_API_HOST + "api/student/" + this.search, {
						_t: Math.random()
					}, (d) => {
						if(d.resultCode == 0) {
							this.stuData = d.record;

							this.$http.get(process.env.JXH_API_HOST + "api/" + session.get('license_info').companyId + "/" + this.search + "/lessons", (o) => {
								if(o.resultCode == 0) {
									let _km2 = o.record.filter((e) => {
										return e.km == '2' && e.lessionType != '3';
									}).map((e) => {
										return {
											type: e.lessionType,
											total: parseInt(e.lessionTime / 60),
											usedH: parseInt(e.usedTime / 60),
											usedM: e.usedTime % 60,
											remainderH: parseInt((e.lessionTime - e.usedTime) / 60),
											remainderM: parseInt((e.lessionTime - e.usedTime) % 60),
											per: parseInt((e.lessionTime - e.usedTime) / e.lessionTime * 100)
										};
									});

									let _km3 = o.record.filter((e) => {
										return e.km == '3' && e.lessionType != '3';
									}).map((e) => {
										return {
											type: e.lessionType,
											total: parseInt(e.lessionTime / 60),
											usedH: parseInt(e.usedTime / 60),
											usedM: e.usedTime % 60,
											remainderH: parseInt((e.lessionTime - e.usedTime) / 60),
											remainderM: parseInt((e.lessionTime - e.usedTime) % 60),
											per: parseInt((e.lessionTime - e.usedTime) / e.lessionTime * 100)
										};
									});
									this.lessonsInfo = {
										km2: _km2,
										km3: _km3
									}
								}
							});

						} else {
							layer.msg(d.msg, {
								shift: 6,
								shade: 0.3
							});
							this.stuData = {};
						}
					});
				}
			},
			submitForm() {
				if(this.stuData.studentId) {
					this.$refs.form.validate(valid => {
						if(!valid) {
							return false;
						}
						this.confirmShow = true;
					});
				} else {
					layer.msg('请先查询学员信息！', {
						shift: 6,
						shade: 0.3
					});
				}

			},
			onSubmit() {
				this.$http.post('iem/refundRecorfs', {
					stuBh: this.stuData.studentId,
					stuName: this.stuData.name,
					idCard: this.stuData.cardnum,
					subject: this.form.subject,
					lessionType: this.form.lessionType,
					lessionTime: this.form.lessionTime,
					amount: this.form.amount,
					operator: this.form.operator,
					remark: this.form.remark
				}, (d) => {
					if(d.status == '1') {
						layer.msg(d.msg);
						this.confirmShow = false;
                  		this.resetForm();
					} else {
						layer.msg(d.msg, {
							shift: 6
						});
					}
				});
			},
			resetForm(){
				this.$refs.form.resetFields();
				this.stuData = {};
				this.lessonsInfo = {};
			}
		}
	}
</script>

<style>

</style>